<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public/public.css">
    <link rel="stylesheet" href="css/layui/css/layui.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/student management.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

</head>

<body id="main">
    <div id="header">
        <a href="student management.html">
            <p class="manage">学生管理&nbsp;&nbsp;&nbsp;</p>
        </a>
        <p class="list">/&nbsp;&nbsp;&nbsp;学生列表</p>
    </div>
    <!-- <iframe src="" frameborder="0"></iframe> -->
    <div id="main1">
        <form action="" id="pubForm">
            <span>学生姓名<input type="text" placeholder="请输入姓名" value=""></span>
            <span>员工姓名<input type="text" placeholder="请输入姓名" value=""></span>
            <span>电话<input type="text" placeholder="请输入姓名" value=""></span>
            <span>身份证号<input type="text" placeholder="请输入姓名" value=""></span>
            <br>
            <span>微信号<input type="text" placeholder="请输入微信号" value=""></span>
            <span>QQ号<input type="text" placeholder="请输入QQ" value=""></span>
            <span>状态&nbsp;&nbsp;&nbsp;&nbsp;<select id="State">
                    <!-- <option value="">请选择状态</option>
                    <option value="">在校大学生</option>
                    <option value="">已毕业大学生</option> -->
                </select>
            </span>
            <br>
            <br>
            <div id="shijian">
                <span class="time">报名时间</span>
                <span><input id="begin_time" type="text" class="layui-input" placeholder="开始日期" value=""></span>
                <span class="he">-</span>
                <span><input type="text" class="layui-input" id="beginday1" placeholder="结束日期" value=""></span>
            </div>
            <!-- <i class="layui-icon layui-icon-date"></i> -->

            <a class="right"><i class="layui-icon layui-icon-search"></i>&nbsp;搜索</a>
            <br>
            <br>
        </form>
        <div id="concent">
            <div class="head">
                <a href="addStudent.html" class="left"><i class="fa fa-plus"></i>&nbsp;添加</a>
                <a href="###" class="left3" id="add_out"><i class="fa fa-sign-out"></i>导出</a>
                <a href="importExcel.html" class="left2"><i class="fa fa-sign-in"></i>导入</a>
                <a href="###" class="left1"><i class="fa fa-user-plus"></i>分配班级</a>
            </div>
            <br>
            <table id="test_table">
                <tr id="center_th">
                    <th class="oneth"><input type="checkbox" class="chioes" id="all"></th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>毕业院校</th>
                    <th>专业</th>
                    <th>状态</th>
                    <th>紧急联系人</th>
                    <th>紧急联系人电话</th>
                    <th class="caozuo">操作</th>
                </tr>
                <!-- <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>王小虎</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>张大明</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>彭于晏</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>小明</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>北京大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>大明</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>上官婉儿</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>哈尔滨工业大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>韩信</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>马可波罗</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>中国科技大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>成吉思汗</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>宫本武藏</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="chioes"></td>
                    <td>卢鑫涛</td>
                    <td>男</td>
                    <td>83</td>
                    <td>16816899168</td>
                    <td>清华大学</td>
                    <td>计算机科学与技术</td>
                    <td>已缴费</td>
                    <td>王大虎</td>
                    <td>17838394203</td>
                    <td>
                        <div class="look"><i class="layui-icon layui-icon-search"></i>&nbsp;查看</div>
                        <div class="redact"><i class="fa fa-pencil"></i>&nbsp;编辑</div>
                    </td>
                </tr> -->
            </table>
            <div id="page"></div>
            <!-- 提醒信息 -->
            <div id="promessage">
                <h2>
                    <span class="leftMsg">提醒信息</span>
                    <span class="rightMsg"><em class="fa fa-wheelchair"></em></span>
                </h2>
                <div class="listMsg">
                    <ul></ul>
                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/ipUrl.js"></script>
<script type="text/javascript" src="js/xlPaging.js"></script>
<script src="css/layui/layui.js"></script>
<!-- <script src="js/page.js"></script> -->
<script type="text/javascript" src="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js"></script>
<script type="text/javascript" src="external/FileSaver.js"></script>
<script type="text/javascript" src="scripts/excel-gen.js"></script>
<script type="text/javascript" src="scripts/demo.page.js"></script>/.

<script src="js/daochu.js"></script>

<script>

    var outExc;
    //数据添加到表格
    function Fajax(data) {
        console.log(data.result.list);
        var Fu = data.result.list;
        outExc = data.result.list;
        console.log(outExc);
        for (var i = 0; i < Fu.length; i++) {
            var tr = $('<tr></tr>').appendTo('table').addClass('list').attr('studentid', Fu[i].studentId);
            console.log('+++++');
            $($('<input>')).appendTo($('<td></td>').appendTo(tr)).attr('type', 'checkbox');
            $('<td></td>').html(Fu[i].studentName).appendTo(tr);
            if (Fu[i].studentSex == '1') {
                $('<td></td>').html("男").appendTo(tr);
            } else {
                $('<td></td>').html("女").appendTo(tr);
            }// 性别
            $('<td></td>').html(Fu[i].age).appendTo(tr);
            $('<td></td>').html(Fu[i].telphone).appendTo(tr);
            $('<td></td>').html(Fu[i].schoolName).appendTo(tr);
            $('<td></td>').html(Fu[i].major).appendTo(tr);
            $('<td></td>').html(Fu[i].stateName).appendTo(tr);
            $('<td></td>').html(Fu[i].emergencyName).appendTo(tr);
            $('<td></td>').html(Fu[i].emergencyContact).appendTo(tr);
            $("<td>").html('<div class="look"><i class="fa fa-search"></i><em>查看</em></div><div class="redact"><i class="fa fa-pencil"></i><em>编辑</em></div>').appendTo(tr);
            $("<span>").html(Fu[i].studentId).appendTo(tr).css('display', 'none').addClass('look');
        }
    };
    //搜索AJAX请求
    $('.right').click(function () {
        $('.list').remove(),
            $.ajax({
                url: studentURL + ':9999/oaSystem/student',
                type: 'post',
                dataType: 'json',
                data: {
                    method: 'search',
                    currentPage: '1',
                    rows: '9',
                    sName: $('input:eq(0)').val(),
                    empName: $('input:eq(1)').val(),
                    telphone: $('input:eq(2)').val(),
                    idCard: $('input:eq(3)').val(),
                    weixin: $('input:eq(4)').val(),
                    qq: $('input:eq(5)').val(),
                    stateId: $('input:eq(6)').val(),
                    inTime: $('input:eq(7)').val(),
                    outTime: $('input:eq(8)').val()
                },
                success: function (data) {
                    console.log(data);
                    Fajax(data);
                    // LOOK();
                },
                error: function (xhr, errorInfo) {
                    console.log('-------');
                }
            });
    });

    //首页数据
    window.onload = function () {
        var totalPage = 10;
        AJAXDATA(1);

        function AJAXDATA(num) {
            $.ajax({
                url: studentURL + ':9999/oaSystem/student',
                type: 'post',
                dataType: 'json',
                data: {
                    method: 'search',
                    currentPage: num,
                    rows: '10',
                },
                success: function (data) {
                    console.log("+++");
                    console.log(data);
                    totalPage = data.result.totalPage;
                    // Fajax(data);
                    console.log(data.result.list);
                    var Fu = data.result.list;
                    outExc = data.result.list;
                    console.log(outExc);
                    for (var i = 0; i < Fu.length; i++) {
                        var tr = $('<tr></tr>').appendTo('table').addClass('list').attr('studentid', Fu[i].studentId);
                        console.log('+++++');
                        $($('<input>')).appendTo($('<td></td>').appendTo(tr)).attr('type', 'checkbox');
                        $('<td></td>').html(Fu[i].studentName).appendTo(tr);
                        if (Fu[i].studentSex == '1') {
                            $('<td></td>').html("男").appendTo(tr);
                        } else {
                            $('<td></td>').html("女").appendTo(tr);
                        }// 性别
                        $('<td></td>').html(Fu[i].age).appendTo(tr);
                        $('<td></td>').html(Fu[i].telphone).appendTo(tr);
                        $('<td></td>').html(Fu[i].schoolName).appendTo(tr);
                        $('<td></td>').html(Fu[i].major).appendTo(tr);
                        $('<td></td>').html(Fu[i].stateName).appendTo(tr);
                        $('<td></td>').html(Fu[i].emergencyName).appendTo(tr);
                        $('<td></td>').html(Fu[i].emergencyContact).appendTo(tr);
                        $("<td>").html('<div class="look"><i class="fa fa-search"></i><em>查看</em></div><div class="redact"><i class="fa fa-pencil"></i><em>编辑</em></div>').appendTo(tr);
                        $("<span>").html(Fu[i].studentId).appendTo(tr).css('display', 'none').addClass('look');
                    }
                    $("#page").paging({
                        nowPage: num, // 当前页码
                        pageNum: totalPage, // 总页码
                        buttonNum: 9, //要展示的页码数量
                        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
                        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
                        callback: function (num) { //回调函数
                            $("#test_table tr:eq(0)").siblings().remove();
                            AJAXDATA(num);
                        }
                    });
                    // LOOK();
                },
                error: function (xhr, errorInfo) {
                    console.log('-------');
                }
            });
            //提醒信息数据
            $.ajax({
                url: studentURL + ':9999/oaSystem/remind',
                type: 'post',
                dataType: 'json',
                data: {
                    "moduleId": 1,
                    "remindState": 1
                },
                success: function (data) {
                    console.log(data);
                    var liM = data.result;
                    for (var i = 0; i < liM.length; i++) {
                        var time = liM[i].remindTime;
                        var newTime = new Date(time);
                        var iY = newTime.getFullYear();
                        var iMoth = newTime.getMonth() + 1;
                        var iDay = newTime.getDate();
                        var iH = newTime.getHours();
                        var iM = newTime.getMinutes();
                        var iS = newTime.getSeconds();
                        console.log(iY + " " + iMoth + " " + iDay + " " + iH + " " + iM + " " + iS)
                        var li = $("<li>").appendTo(".listMsg ul");
                        $("<span>").html(liM[i].remindContent).appendTo(li);
                        $("<span>").html(iY + "-" + iMoth + "-" + iDay + " " + iH + ":" + iM + ":" + iS).appendTo(li);
                    }
                },
                error: function (xhr, errorInfo) {
                    console.log('-------');
                }
            });
        }
    }
    //通过状态搜索
    $(function () {
        $.ajax({
            type: 'post',
            url: studentURL + ':9999/oaSystem/student',
            dataType: 'json',
            data: {
                method: 'states',
                jobId: 5
            },
            success: function (data) {
                console.log(data);
                $('#State').html('<option disabled selected hidden>请选择状态</option>');
                for (var i = 0; i < data.result.length; i++) {
                    $('<option>').prop({
                        'label': data.result[i].stateName,
                        'value': data.result[i].stateId
                    }).appendTo('#State');
                }
            }
        })
    })
    // 搜索信息
    $('.right').click(function () {
        $('.list').remove(),
            $.ajax({
                url: studentURL + ':9999/oaSystem/student',
                type: 'post',
                dataType: 'json',
                data: {
                    method: 'search',
                    currentPage: '1',
                    rows: '9',
                    sName: $('input:eq(0)').val(),
                    empName: $('input:eq(1)').val(),
                    telphone: $('input:eq(2)').val(),
                    idCard: $('input:eq(3)').val(),
                    weixin: $('input:eq(4)').val(),
                    qq: $('input:eq(5)').val(),
                    stateId: $('input:eq(6)').val(),
                    inTime: $('input:eq(7)').val(),
                    outTime: $('input:eq(8)').val()
                },
                success: function (data) {
                    console.log(data);
                    Fajax(data);
                    // LOOK();
                },
                error: function (xhr, errorInfo) {
                    console.log('-------');
                }
            });
    });
   

    //改变边框颜色
    var a = -1;
    $("input[type='text']").each(function (i) {
        $("input[type='text']:eq(" + i + ")").focus(function () {
            if (a != -1) {
                $("input[type='text']:eq(" + a + ")").removeClass('bor');
            }
            $(this).addClass('bor');
            a = i;
        });
    });
    //点击查看跳转页面
    $('table').on('click', '.look', function () {
        // var TRID = $(this).parent().parent().find('span').html();
        // console.log(TRID);
        localStorage.stId = $(this).parent().parent().attr('studentid');
        console.log(localStorage.stId);

        window.location.href = "lookTwo.html";
    })
    //点击编辑跳转页面
    $('table').on('click', '.redact', function () {
        localStorage.stId = $(this).parent().parent().attr('studentid');
        window.location.href = 'changeTwo.html';
    })
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#begin_time'
        });
    })
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginday1'
        });
    })
    $('.left2').click(function () {
        alert('请导入数据');
    })
    $('.left1').click(function () {
        alert('请分配班级');
    })
    // $('.look').click(function () {

    // })

    //全选
    $('tr').addClass('list');
    var onOff = true;
    $(function () {
        $("#all").click(function () {
            if (this.checked) {
                $(".list :checkbox").prop("checked", true);
            } else {
                $(".list :checkbox").prop("checked", false);
            }
            if (onOff) {
                $(".list :checkbox,#all").prop("checked", true);
                onOff = false;
            } else {
                $(".list :checkbox,#all").prop("checked", false);
                onOff = true;
            }
        });
        //设置全选复选框
        $(".list :checkbox").click(function () {
            var chknum = $(".list :checkbox").length;//选项总个数
            var chk = 0;
            $(".list :checkbox").each(function () {
                if ($(this).prop("checked") == true) {
                    chk++;
                }
            });
            if (chknum == chk) {//全选
                $("#all").prop("checked", true);
            } else {//不全选
                $("#all").prop("checked", false);
            }
            //分配任务
            $("#allot").on('click', function () {
                if ($(".list :checkbox").prop("checked") == true) {
                    console.log($(".list :checkbox"));
                }
            })
        });
    });

    // 提醒栏
    var onOff = true;
    var ulTop;
    var iTimer;
    $('.rightMsg').click(function () {
        if (onOff) {
            // 改变小图标
            $('.rightMsg em').addClass('fa fa-wheelchair-alt');
            $('#promessage').animate({
                height: 250
            }, 400, function () {
                $('.listMsg').css('display', 'block');
                // 添加定时器
                iTimer = setInterval(function () {

                    if (($('.listMsg').scrollTop() + $('.listMsg').height()) >= $('.listMsg ul').height()) {
                        // 滚动到底部时回到顶部继续滚动
                        ulTop = 0;
                        $('.listMsg').scrollTop(ulTop + 1);
                    } else {
                        ulTop = $('.listMsg').scrollTop();
                        $('.listMsg').scrollTop(ulTop + 1);
                    }

                }, 60);
            });
            onOff = false;
        } else {
            $('.rightMsg em').removeClass('fa fa-wheelchair-alt');
            clearInterval(iTimer)
            $('.rightMsg em').addClass('fa fa-wheelchair');
            $('#promessage').animate({
                height: 50
            }, 400, function () {
                $('.listMsg').css('display', 'none');
            });
            onOff = true;
        }
    });



</script>